<template>
    <div class="app-container">
        <!--工具栏-->
        <div class="head-container">
            <!-- 工具栏 -->
            <div v-if="crud.props.searchToggle">
                <!-- 搜索 -->
                <el-input v-model="query.blurry" clearable size="small" placeholder="应用名称模糊搜索" style="width: 150px;"
                                    class="filter-item" @keyup.enter.native="toQuery" />
                <el-select v-model="query.channelCode" clearable size="small" placeholder="渠道码" class="filter-item" style="width: 120px" @change="crud.toQuery">
                    <el-option v-for="item in dict.dict.channel_code" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
                <el-select v-model="query.updateType" clearable size="small" placeholder="更新类型" class="filter-item" style="width: 120px" @change="crud.toQuery">
                    <el-option v-for="item in dict.dict.update_type" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
                <el-select v-model="query.versionStatus" clearable size="small" placeholder="发布状态" class="filter-item" style="width: 120px" @change="crud.toQuery">
                    <el-option v-for="item in dict.dict.version_status" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
                <rrOperation :crud="crud" />
            </div>
            <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
            <crudOperation :permission="permission"/>
            <!-- 文件上传 -->
            <el-dialog :visible.sync="dialog" :close-on-click-modal="false" append-to-body width="500px" @close="doSure">
                <el-upload
                :before-upload="beforeUpload"
                :before-remove="handleBeforeRemove"
                :on-success="handleSuccess"
                :on-error="handleError"
                :file-list="fileList"
                :headers="headers"
                :action="ossUploadApi"
                :limit="1"
                class="upload-demo"
                :multiple=false>
                    <el-button size="small" type="primary">点击上传</el-button>
                    <div slot="tip" style="display: block;" class="el-upload__tip">上传文件的大小必须小于200M</div>
                </el-upload>
                <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="doSure">确认</el-button>
                </div>
            </el-dialog>
            <!--表单组件-->
            <el-dialog :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0"
                       :title="crud.status.title" width="680px">
                <el-form ref="form" :model="form" :rules="rules" size="small" :inline="true" label-width="100px">
                                <el-form-item label="渠道码" prop="channelCode">
                                    <el-select v-model="form.channelCode" style="width: 200px;">
                                        <el-option v-for="item in dict.dict.channel_code" :key="item.value" :label="item.label" :value="item.value"/>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="应用名称" prop="appName">
                                        <el-input v-model="form.appName" style="width: 200px;"/>
                                </el-form-item>
                                <el-form-item label="版本号" prop="appVersion">
                                        <el-input v-model="form.appVersion" style="width: 200px;"/>
                                </el-form-item>
                                <el-form-item label="允许最低版本">
                                        <el-input v-model="form.allowLowestVersion" style="width: 200px;"/>
                                </el-form-item>
                                <el-form-item label="MD5值" prop="md5">
                                        <el-input v-model="form.md5" style="width: 200px;"/>
                                </el-form-item>
                                <el-form-item label="url地址" prop="url">
                                        <div id="divUpload">
                                               <el-input v-model="form.url" style="width: 120px;"/>&nbsp;&nbsp;
                                               <el-button class="filter-item" size="mini" type="primary" icon="el-icon-upload" @click="dialog = true">上传</el-button>  
                                        </div>
                                </el-form-item>
                                <el-form-item label="更新类型" prop="updateType">
                                    <el-select v-model="form.updateType" clearable size="small" placeholder="更新类型" class="filter-item" style="width: 200px">
                                        <el-option v-for="item in dict.dict.update_type" :key="item.value" :label="item.label" :value="item.value" />
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="发布状态" prop="versionStatus">
                                    <el-radio-group v-model="form.versionStatus">
                                        <el-radio v-for="item in dict.dict.version_status" :key="item.value" :label="item.value">{{ item.label }}</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                                <el-form-item label="描述" prop="versionDescription">
                                        <el-input v-model="form.versionDescription" style="width: 520px;" rows="3" type="textarea" />
                                </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button type="text" @click="crud.cancelCU">取消</el-button>
                    <el-button :loading="crud.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
                </div>
            </el-dialog>
            <!--表格渲染-->
            <el-table ref="table" v-loading="crud.loading" :data="crud.data" size="small" style="width: 100%;"
                      @selection-change="crud.selectionChangeHandler">
                <el-table-column type="selection" width="55"/>
                                <el-table-column v-if="columns.visible('channelCode')"
                                                 prop="channelCode"
                                                 label="渠道码"/>
                                <el-table-column v-if="columns.visible('appName')"
                                                 prop="appName"
                                                 label="应用名称"/>
                                <el-table-column v-if="columns.visible('appVersion')"
                                                 prop="appVersion"
                                                 label="版本号"/>
                                <el-table-column v-if="columns.visible('allowLowestVersion')"
                                                 prop="allowLowestVersion"
                                                 label="允许最低版本" min-width="100px"/>
                                <el-table-column v-if="columns.visible('md5')"
                                                 prop="md5"
                                                 label="MD5值"/>
                                <el-table-column v-if="columns.visible('url')"
                                                 prop="url"
                                                 label="url地址">
                                    <template slot-scope="scope">
                                        <el-popover
                                          :content="scope.row.url"
                                          placement="top-start"
                                          title="url地址"
                                          width="200"
                                          trigger="hover"
                                        >
                                          <a slot="reference"
                                            :href="scope.row.url"
                                            class="el-link--primary"
                                            style="word-break:keep-all;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color: #1890ff;font-size: 13px;"
                                            target="_blank"
                                          >
                                            {{ scope.row.url }}
                                          </a>
                                        </el-popover>
                                    </template>
                                </el-table-column>
                                <el-table-column v-if="columns.visible('updateType')" label="更新类型" align="center" prop="更新类型">
                                    <template slot-scope="scope">
                                        <div>
                                            <el-tag v-if="scope.row.updateType === 1" :type="'info'">一般更新</el-tag>
                                            <el-tag v-if="scope.row.updateType === 2" :type="'info'">静默更新</el-tag>
                                            <el-tag v-if="scope.row.updateType === 3" :type="'info'">可忽略更新</el-tag>
                                            <el-tag v-if="scope.row.updateType === 4" :type="'info'">静默可忽略更新</el-tag>
                                            <el-tag v-if="scope.row.updateType === 5" :type="''">强制更新</el-tag>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column v-if="columns.visible('versionDescription')"
                                                 prop="versionDescription"
                                                 label="描述"/>
                                
                                <el-table-column v-if="columns.visible('versionStatus')" label="发布状态" align="center" prop="发布状态">
                                    <template slot-scope="scope">
                                        <div>
                                            <el-tag v-if="scope.row.versionStatus === 1" :type="''">已上架</el-tag>
                                            <el-tag v-else :type=" 'info' ">未上架</el-tag>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column v-if="columns.visible('createTime')"
                                                 prop="createTime"
                                                 label="创建时间">
                                    <template slot-scope="scope">
                                        <span>{{ parseTime(scope.row.createTime) }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column v-if="columns.visible('updateTime')"
                                                 prop="updateTime"
                                                 label="更新时间">
                                    <template slot-scope="scope">
                                        <span>{{ parseTime(scope.row.updateTime) }}</span>
                                    </template>
                                </el-table-column>
                <el-table-column v-permission="['admin','apkVersion:edit','apkVersion:del']" label="操作"
                                 width="150px" align="center">
                    <template slot-scope="scope">
                        <udOperation
                                :data="scope.row"
                                :permission="permission"
                        />
                    </template>
                </el-table-column>
            </el-table>
            <!--分页组件-->
            <pagination/>
        </div>
    </div>
</template>

<script>
    import { mapGetters } from 'vuex'
    import { getToken } from '@/utils/auth'
    import crudApkVersion from '@/api/apkVersion'
    import CRUD, {crud, form, header, presenter} from '@crud/crud'
    import rrOperation from '@crud/RR.operation'
    import crudOperation from '@crud/CRUD.operation'
    import udOperation from '@crud/UD.operation'
    import pagination from '@crud/Pagination'
    import MaterialList from "@/components/material";

    // crud交由presenter持有
    const defaultCrud = CRUD({
        title: '应用包管理',
        url: 'api/apkVersion',
        sort: 'id,desc',
        crudMethod: {...crudApkVersion}
    })
    const defaultForm = {id: null, channelCode: null, appName: null, appVersion: null, md5: null, url: null, updateType: null, versionDescription: null, allowLowestVersion: null, versionStatus: null}
    export default {
        name: 'ApkVersion',
        components: {pagination, crudOperation, rrOperation, udOperation , MaterialList},
        mixins: [presenter(defaultCrud), header(), form(defaultForm), crud()],
        // 设置数据字典
        dicts: ['channel_code', 'update_type', 'version_status'],
        computed: {
            ...mapGetters([
            'ossUploadApi'
            ])
        },
        data() {
            return {
                permission: {
                    add: ['admin', 'apkVersion:add'],
                    edit: ['admin', 'apkVersion:edit'],
                    del: ['admin', 'apkVersion:del']
                },
                title: '文件', dialog: false,
                icon: 'el-icon-refresh',
                url: '', 
                headers: { 'Authorization': getToken() },
                dialogImageUrl: '', dialogVisible: false, fileList: [], files: [], newWin: null,
                rules: {
                    appName: [
                        { required: true, message: '请输入应用名称', trigger: 'blur' },
                        { min: 2, max: 20, message: '长度在 2 到 60 个字符', trigger: 'blur' }
                    ],
                    appVersion: [
                        { required: true, message: '请输入版本号', trigger: 'blur' },
                        { min: 2, max: 20, message: '长度在 2 到 60 个字符', trigger: 'blur' }
                    ],
                    /*
                    url: [
                        { required: true, message: '请上传文件', trigger: 'blur' },
                        { min: 2, max: 20, message: '长度在 2 到 60 个字符', trigger: 'blur' }
                    ]*/

                }            
            }
        },
        watch: {
            url(newVal, oldVal) {
                if (newVal && this.newWin) {
                    this.newWin.sessionStorage.clear()
                    this.newWin.location.href = newVal
                    // 重定向后把url和newWin重置
                    //this.url = ''
                    this.newWin = null
                }
            }
        },
        methods: {
            // 新增与编辑前做的操作
            [CRUD.HOOK.afterToCU](crud, form) {

            }, // 提交前的验证
            [CRUD.HOOK.afterValidateCU](crud) {
                if (!crud.form.channelCode) {
                    this.$message({
                        message: '请选择渠道码',
                        type: 'warning'
                    })
                    return false
                } else if (!crud.form.versionStatus) {
                    this.$message({
                        message: '请选择发布状态',
                        type: 'warning'
                    })
                    return false
                } else if (!crud.form.updateType) {
                    this.$message({
                        message: '请选择更新类型',
                        type: 'warning'
                    })
                    return false
                }
                return true
            },
            beforeUpload(file) {
                const isLimit = file.size / 1024 / 1024 < 200
                if (!isLimit) {
                    this.$message.error('上传文件的大小必须小于200MB!')
                }
                return isLimit
            },
            handleSuccess(response, file, fileList) {
                const uid = file.uid
                const id = response.id
                this.form.url = response.url
                this.files.push({ uid, id })
            },
            handleBeforeRemove(file, fileList) {
                this.form.url = ''
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url
                this.dialogVisible = true
            },
            // 监听上传失败
            handleError(e, file, fileList) {
                const msg = JSON.parse(e.message)
                this.crud.notify(msg.message, CRUD.NOTIFICATION_TYPE.ERROR)
            },
            // 刷新列表数据
            doSure() {
                this.fileList = []
                this.dialogVisible = false
                this.dialogImageUrl = ''
                this.dialog = false
                //this.crud.toQuery()
            },
        }
    }


</script>

<style scoped>
    .table-img {
        display: inline-block;
        text-align: center;
        background: #ccc;
        color: #fff;
        white-space: nowrap;
        position: relative;
        overflow: hidden;
        vertical-align: middle;
        width: 32px;
        height: 32px;
        line-height: 32px;
    }
    #divUpload {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
    }

</style>
